<script setup>
import { ref } from 'vue'
import { Lock } from '@element-plus/icons-vue'
//导入 Pinia 的 token.js文件
import { useTokenStore } from '@/stores/token.js'
const tokenStore = useTokenStore();

//导入 Pinia 的 userInfo.js文件
import useUserInfoStore from '@/stores/userInfo.js'
const userInfoStore = useUserInfoStore();

//定义数据模型
const password = ref({
    old_pwd: '',
    new_pwd: '',
    re_pwd: ''
})


//校验密码的函数
const checkRePassword = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请再次确认密码'))
    } else if (value !== password.value.re_pwd) {
        callback(new Error('请确保两次输入的密码一样'))
    } else {
        callback()
    }
}

//定义表单校验规则
const rules = {
    old_pwd: [
        { required: true, message: '请输入原密码', trigger: 'blur' },
        { min: 5, max: 16, message: '长度为5~16位非空字符', trigger: 'blur' }
    ],
    new_pwd: [
        { required: true, message: '请输入新密码', trigger: 'blur' },
        { min: 5, max: 16, message: '长度为5~16位非空字符', trigger: 'blur' }
    ],
    re_pwd: [
        { validator: checkRePassword, required: true, trigger: 'blur' }
    ]
}

//导入 重置密码接口
import { userPasswordUpdateService } from '@/api/user'
import { ElMessage } from 'element-plus'

//导入路由
import { useRouter } from 'vue-router'
const router = useRouter();

//重置密码
const updatePwd = async () => {
    console.log('看看 password 是啥')
    console.log(password)

    console.log('看看 password.value 是啥')
    console.log(password.value)

    //调用接口
    let result = await userPasswordUpdateService(password.value);

    ElMessage.success(result.message ? result.message : '重置密码 成功');

    //密码重置成功后，清空Pinia
    tokenStore.removeToken();
    userInfoStore.removeInfo();

    //跳转到首页，使用useRouter切换组件，完成跳转
    router.push('/login');
}
</script>

<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>重置密码</span>
            </div>
        </template>
        <el-row>
            <el-col :span="12">
                <!-- 
                    :model 绑定数据模型 
                    :rules 绑定校验规则 
                -->
                <el-form :model="password" :rules="rules" label-width="100px" size="large">

                    <el-form-item label="原密码" prop="old_pwd">
                        <el-input :prefix-icon="Lock" type="password" placeholder="请输原密码"
                            v-model="password.old_pwd"></el-input>
                    </el-form-item>
                    <el-form-item label="新密码" prop="new_pwd">
                        <el-input :prefix-icon="Lock" type="password" placeholder="请输入新密码"
                            v-model="password.new_pwd"></el-input>
                    </el-form-item>
                    <el-form-item label="确认新密码" prop="re_pwd">
                        <el-input :prefix-icon="Lock" type="password" placeholder="请再次输入密码"
                            v-model="password.re_pwd"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <!-- 按钮绑定单击事件 @click -->
                        <el-button type="primary" @click="updatePwd">提交重置</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </el-card>
</template>